<template>
  <div>

       <div class="reft-buttom">
         <div>
           <!-- 规格购物车 -->
           <span>{{gouwuche.name}}</span>
         <span v-for="(item,index)  in gouwuche.values"
         :key="item.id"
         @click="quanxuanFn(index)"
          class="span-img" :class="{'avit':isguige === index}">
           <img :src="item.picture" alt="">
         </span>
          </div>
          <!-- 数量购物车 -->
<div class="shuliangs">
    <span>数量</span>
         <div class="num">
           <a  @click="sum--">-</a>
   <input @input="inputFn" readonly type="text" v-model="sum">
   <a @click="sum++">+</a>
   </div>
</div>
       </div>
       <button @click="but" class="but">
加入购物车
       </button>

  </div>
</template>

<script>
import { ref, watch } from 'vue-demi'

export default {
  props: {
    gouwuche: {
      type: Object,
      default: () => {}
    }
  },
  setup (props, { emit }) {
    const but = () => {
      emit('a', sum.value)
    }
    const quan = ref([])
    const imgUrl = ref(null)
    // const route = useRoute()
    const ids = ref(null)
    // findGoods(route.params.id).then(res => {
    //   console.log(res)
    // })
    const disableds = ref(false)
    const isguige = ref(null)
    const sum = ref(1)
    watch(sum, (a) => {
      emit('nums', a)
      if (sum.value <= 1) sum.value = 1
      emit('nums', sum.value)
    })
    const inputFn = () => {
      if (sum.value <= 1) {
        disableds.value = true
        sum.value = 1
      }
    }
    // -----
    const quanxuanFn = (ind, id) => {
      ids.value = id
      console.log(id)
      isguige.value = ind
      emit('num', ind, sum)
    }
    return {
      quanxuanFn,
      imgUrl,
      inputFn,
      isguige, // 规格状态
      sum, // 购买数量
      disableds,
      quan,
      but,
      ids
    }
  }
}
</script>

<style lang="less">
 .reft{
     padding:  40px 40px 40px 0;

    .reft-buttom{

.num{
width: 120px;
    height: 30px;
    border: 1px solid #e4e4e4;
    display: flex;
  input {
        overflow: visible;
    width: 60px;
    padding: 0 5px;
    text-align: center;
    color: #666;
    -webkit-appearance: none;
    outline: none;
    border: none;
  }
  a{
    width: 29px;
    line-height: 28px;
    text-align: center;
    background: #f8f8f8;
    font-size: 16px;
    color: #666;
  }
  span{
   margin: 0 ;
    width: 20px;

  }
}
.shuliangs{
  display: flex;
  align-items: center;
  margin-top: 40px;
}
      .span-img{
        display: inline-block;
        border: 1px solid #e4e4e4;
        width: 50px;
        height: 50px;

        img{
          width: 100%;
          height: 100%;
        }
      }
       .avit{
    border: 1px solid #5ab79c !important;
  }
      span{
           margin: 0 20px;
      }
    }
  }
    .but{
    margin-left: 10px;
    margin-top: 20px;
        width: 180px;
    height: 50px;
    font-size: 16px;
    background-color: #5bb89c;
    border: 1px solid #ffffff;
    border-radius: 10px;
    color: #ffffff;
    cursor: pointer;
  }
</style>
